<template>
  <div class="flex w-479px">
    <div
      class="flex flex-items-center mr-26px w-49px h-285px text-21px text-#fdfcfc bg-#bb0615"
    >
      <p class="py-67px px-13px letter">在线课堂</p>
    </div>
    <div class="pt-13px">
      <el-row>
        <el-col
          :span="6"
          v-for="item in list"
          :key="item.img"
          class="text-center cursor-pointer hover-text-#bb0615"
          @click="go(item.title)"
        >
          <img class="w-73px h-75px" :src="item.img" alt="" />
          <p class="mb-43px text-14px font-600">{{ item.title }}</p>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";

const $router = useRouter();
const list = [
  { img: "/zl.png", path: "", title: "专利" },
  { img: "/pp.png", path: "", title: "品牌" },
  { img: "/bq.png", path: "", title: "版权" },
  { img: "/tx.png", path: "", title: "体系" },
  { img: "/qb.png", path: "", title: "情报" },
  { img: "/yy.png", path: "", title: "运营" },
  { img: "/bh.png", path: "", title: "保护" },
  { img: "/zjtx.png", path: "", title: "专精特新" },
];

const go = (title) => {
  $router.push({ path: "/search", query: { title } });
};
</script>

<style scoped>
.letter {
  line-height: 45px;
}
</style>
